<template>
	<view>
		<!-- 公共顶部导航栏 -->
		<!-- <navbar></navbar> -->
		<view class="backgroundBox">
			<u--image :src="backgroundPicture" width="800rpx" height="600rpx"></u--image>
			<view class="liveBox">
				<view class="factoryImg">
					<u--image :src="factoryPicture" height="500rpx" width="750rpx" mode="scaleToFill"></u--image>
				</view>
				<view class="content">
					<view class="top">
						<view class="shiGong">
							正在施工
						</view>
						<view class="sonShiGon">
							共13个正在施工 >
						</view>
					</view>
					<view style="padding: 20rpx;">
						<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
							<view class="flex">
								<view class="flex flex-direction " style="padding:20rpx 0 ;margin-right:30rpx;"
									v-for="(item,index) in followData" @click="goDetail()">
									<view class="itemName">{{item.name}}</view>
									<image :src="item.image" mode="aspectFill"
										style="width: 300rpx;height: 150rpx;border-radius: 20rpx;"></image>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view class="cardBox">
			<view style="height: 100rpx;display: flex;padding: 30rpx;">
				<view style="margin-left: 30rpx;font-size: 40rpx;">
					严选工厂
				</view>
				<view style="margin-left: 20rpx;">
					<u--image :src="strictSelection" width="200rpx" height="40rpx"></u--image>
				</view>
			</view>
			<view class="gcBox" v-for="(item,index) in listData" :key="index" @tap="goDetailIndex(item)">
				<view style="display: flex;padding:0 60rpx ;">
					<view style="margin-top: 10rpx;border: 1rpx solid rgba(30,30,30,0.1);width: 96rpx;height: 96rpx;">
						<image :src="item.logo"  style="width: 90rpx;height: 90rpx;"></image>
					</view>
					<view class="leftText">
						<view>
							<u--text :text="item.shopsName"></u--text>
						</view>
						<view>
							<u--text :text="item.introduction" color="rgba(30, 30, 30, 0.30)">
							</u--text>
						</view>
						<view>
							<view class="tagList">
								<view class= 'tag' v-for="(item,index) in item.introduce ">
									{{item}}
								</view>
							</view>
							<view>
							</view>
						</view>
					</view>
				</view>
				<view>
				</view>
				<view style="width: 100vw;padding:30rpx ;border-top-right-radius:25rpx ;">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120" >
						<view class="flex" style="width:100%;">
					     <view v-for="(item,index) in item.product" style="padding:0 15rpx ;" >
							 <image :src="item.image" mode="aspectFit" style="width: 244rpx;height: 184rpx;"></image>
							 <view style="margin:10rpx 0;color: #1E1E1E;font-size: 28rpx;">{{item.classify}}</view>
							 <view style="color: rgba(30,30,30,0.3);font-size: 24rpx;">{{item.title}}</view>
						 </view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/publicomps/navbar.vue";
	export default {
		components: {
			navbar,
		},
		data() {
			return {
				backgroundPicture: "../../../static/tabbar/factory/WechatIMG65@2x.png",
				strictSelection: "../../../static/tabbar/factory/7978@2x.png",
				factoryPicture: "../../../static/tabbar/factory/8301@2x.png",
				listData:[],
				followData: [{
						image: '/clientEnd/static/desgin/304@2x.png',
						name: '兔八哥装修',
					},
					{
						image: '/clientEnd/static/desgin/304@2x.png',
						name: '工厂家居',
					},
					{
						image: '/clientEnd/static/desgin/304@2x.png',
						name: '重庆左定右制设计工厂',
					},
					{
						image: '/clientEnd/static/desgin/304@2x.png',
						name: '成都巨量星河科技',
					}
				],
			}
		},
		onLoad() {
			 this.detailsList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
			setTimeout(() => {
				this.detailsList();
			}, 100);
		},
		methods: {
			detailsList(){
				let data ={
					pageNo:1,
					pageSize:10
				}
				this.$api.details(data).then((res)=>{
					this.listData = res.data.result.list
	            	 this.listData.forEach((item)=>{
					   item.introduce =item.introduce.split(',')
					})
					// 关闭下拉
					uni.stopPullDownRefresh();
				})
			},
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop
			},

			goDetail() {
				console.log("执行");
				this.$tools.goPage("/clientEnd/page/factor/liveDetail")
			},
            goDetailIndex(e){
				this.$tools.goPageNoAuth("/clientEnd/page/factor/detailIndex?data="+JSON.stringify(e))
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cardBox {
		position: relative;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0px 0px;
		z-index: 2;
		margin-top: -30rpx;

		.gcBox {
			border-bottom:1rpx solid rgba(30,30,30,0.1);
			margin:50rpx 0 ;
			.leftText {
				margin-left: 30rpx;

				.tagList {
					display: flex;
					margin: 10rpx 0;
					justify-content: space-between;

					.tag {
						width: 120rpx;
						background-color: rgba(30, 30, 30, 0.10);
						border-radius: 10rpx;
						height: 50rpx;
						margin-right: 15rpx;
						line-height: 50rpx;
						text-align: center;
						color: rgba(30, 30, 30, 1);
						font-size: 25rpx;
					}
				}
			}
		}
	}

	.itemName {
		color: #fff;
	}

	.backgroundBox {

		height: 1000rpx;
		// background-color: red;


		.liveBox {
			// background-color: gold;
			position: relative;
			background-image: "../../../static/tabbar/factory/8301@2x.png";
			height: 400rpx;

			.content {
				position: relative;
				z-index: 2;
			}

			.factoryImg {
				position: absolute;
				top: -70rpx;
				z-index: 1;
			}

			.top {
				display: flex;
				padding: 20rpx 50rpx 0rpx 40rpx;


				.scroll-view_H {
					white-space: nowrap;
					width: 100%;
				}

				.shiGong {
					font-size: 38rpx;
					color: #fff;
					font-weight: 500;
					z-index: 9999;
				}

				.sonShiGon {
					margin-left: auto;
					font-size: 30rpx;
					color: rgba(255, 255, 255, 0.60);
					font-weight: 500;
					z-index: 9999;
				}

			}
		}
	}
</style>
